<template>
  <el-form-item
    :label="data.label || ''"
    :prop="data.dataName"
    :label-width="data.labelWidth"
    :style="{ width: data.width || '100%' }"
  >
    <el-select
      v-if="data.component == 'select'"
      v-model="form[data.dataName]"
      :placeholder="`请选择${data.label}`"
      @change="(v) => data.change && data.change(v, form, data)"
    >
      <el-option
        v-for="item in option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input
      v-if="data.component == 'input'"
      v-model="form[data.dataName]"
      :placeholder="`请输入${data.label}`"
      :onkeyup="data.onkeyup || ''"
      :type="data.type"
      @input="(v) => data.change && data.change(v, form, data)"
    />
    <el-radio-group
      v-if="data.component == 'radio'"
      v-model="form[data.dataName]"
      @change="(v) => data.change && data.change(v, form, data)"
    >
      <el-radio
        v-for="(dict, index) in dict.type[data.dict] || data.option()"
        :key="dict.value + index"
        :label="dict.value"
        >{{ dict.label }}</el-radio
      >
    </el-radio-group>
  </el-form-item>
</template>

<script>
import Vue from "vue";
export default {
  dicts: [
    "database_case_sensitive",
    "data_status",
    "data_base_type",
    "database_auto_commit",
    "database_datatype",
    "database_datataststatus",
    "dabase_show",
    "instancename_show",
    "field_case",
    "objectname_quote",
  ],
  props: {
    data: {
      type: Object,
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      option: [],
    };
  },
  mounted() {
    let { component, defaultValue, dataName } = this.$props.data;
    if (component == "select") {
      this.getOption();
    }
    if (!this.$props.form[dataName] && defaultValue) {
      Vue.set(this.$props.form, dataName, defaultValue);
    }
  },
  methods: {
    async getOption() {
      let res = await this.$props.data.option(this.$props.form.type);
      this.option = res;
    },
  },
};
</script>
